<!DOCTYPE HTML>
<html>

<head>
   <title>编辑商户认证信息</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page   span24 ">
         <div class="detail-page-title">
            <h4>编辑商户更多信息
               <div class="pull-right">
                  <a type="button" class="page-action jx-btn" data-type="close" href="#">返回</a>
               </div>
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <table id="" class="table table-header table-condensed table-bordered">
                  <tr>
                     <td width="150"> <label class="pull-right">商户名称：</label></td>
                     <td>
                        激想体育特卖号
                     </td>

                  </tr>
                  <tr>
                     <td width="150"> <label class="pull-right">商户编码：</label></td>
                     <td>
                        37147874
                     </td>
                  </tr>

               </table>
               <form id="J_form" class="jx-form form-horizontal">
                  <div id="tab"></div>
                  <div id="panel" class="tab-panel">
                     <div class="panel-item">
                        <div class="row">
                           <div class="control-group">
                              <label for="" class="control-label">售后/维权电话：
                                    </label>
                              <div class="controls">
                                 <input type="text" class="input-large" placeholder="请输入售后/维权客户电话">
                                 <span class="auxiliary-text"> 手机号将用于接收买家维权咨询、维权通知提醒   </span>
                              </div>
                           </div>
                           <div class="row">
                              <div class="control-group">
                                 <label for="" class="control-label">座机号:
                                    </label>
                                 <div class="controls">
                                    <input type="text" class="input-small" placeholder="区号">-<input type="text" class="input"
                                       placeholder="区号">
                                    <span class="auxiliary-text"> 优先展示座机号码</span>
                                 </div>
                              </div>
                           </div>
                           <div class="row">
                              <div class="control-group ">
                                 <span class="auxiliary-text offset2">在订单详情页中展示，买家可通过“拨打电话”直接联系我们</span>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--item end-->
                     <div class="panel-item">
                        <div class="row mb10">
                           <div class="control-group">
                              <button type="button" id="add-new-btn" class="supplier-add jx-btn btn-large btn-default">新增地址</button>

                           </div>
                        </div>
                        <div class="row">
                           <div id="grid"></div>
                        </div>
                     </div>
                     <!--item end-->
                     <div class="panel-item"> </div>
               </form>
               </div>
            </div>
            <div class="row">
               <div class="span3">
                  <button class="jx-btn btn-default btn-xlarge btn-block">保存</button>
               </div>
            </div>

         </div>

      </div>
      <!-- 初始隐藏 addressDialog内容 -->
      <div id="address" class="hide">
         <form id="A_form" class="jx-form form-horizontal">
            <div class="row">
               <div class="control-group span12">
                  <label class="control-label">联系人：</label>
                  <div class="controls">
                     <input type="text" class="control-text" data-rules="{required:true}">
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="control-group span12">
                  <label class="control-label">联系方式：</label>
                  <div class="controls">
                     <input type="text" class="control-text" data-rules="{required:true}">
                  </div>
               </div>
            </div>

            <div class="row">
               <div class="control-group span12">
                  <label class="control-label">座机：</label>
                  <div class="controls">
                     <input class="input-mini" type="text"> - <input class="input" data-rules="{number:true,required : true}"
                        type="text"> - <input class="input-mini" type="text">


                  </div>
               </div>
               <span class="auxiliary-text">优先展示座机号码</span>
            </div>
            <div class="row">
               <div class="control-group span15 ">
                  <label class="control-label">发货地：</label>
                  <div class="controls bui-form-group-select" data-type="city">
                     <select class=" input-medium">
                                        <option>省份</option>
                                    </select>&nbsp;&nbsp;省&nbsp;&nbsp;
                     <select class="input-medium">
                                        <option>城市</option>
                                    </select>&nbsp;&nbsp;市&nbsp;&nbsp;
                     <select class="input-medium">
                                        <option>区</option>
                                    </select>&nbsp;&nbsp;区&nbsp;&nbsp;
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="control-group span15 ">
                  <label class="control-label">详细地址：</label>
                  <div class="control-row4 controls">
                     <textarea class="input-xlarge" data-rules="{required : true}" type="text" placeholder="填写详细地址，如街道名称，门牌号等信息"></textarea>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="control-group span12">
                  <label class="control-label">地址类型：</label>
                  <div class="controls">
                     <label class="radio inline" for="tuihuo"><input id="tuihuo" value="1"  checked="checked"  name="type" type="radio" >退货地址</label>&nbsp;&nbsp;&nbsp;
                     <label class="radio inline" for="shoupiao"><input id="shoupiao"  value="2"  name="type" type="radio">收票地址</label>
                  </div>
               </div>
            </div>
         </form>
      </div>


      <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
      <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/admin.js"></script>
      <script type="text/javascript">
         BUI.use('common/page');

         BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/tab'], function (Grid, Data, Search, Tab) {
            var tab = new Tab.TabPanel({
               render: '#tab',
               elCls: 'nav-tabs',
               panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
               //selectedEvent : 'mouseenter',//默认为click,可以更改事件
               autoRender: true,
               children: [{
                  title: '商户退货/维权设置',
                  value: '1',

               }, {
                  title: '商家地址库',
                  value: '2',


               }, {
                  title: '商户客服',
                  value: '3',

               }]
            });
            tab.on('selectedchange', function (ev) {
               var item = ev.item;

            });
            tab.setSelected(tab.getItemAt(1));

         });
      </script>
      <script>
         BUI.use(['bui/grid', 'bui/data', 'bui/form', 'common/search'], function (Grid, Data, Form, Search) {

            var Grid = Grid,
               Store = Data.Store,
               columns = [{
                     title: '联系人',
                     dataIndex: 'a',
                     elCls: 'center', //居中
                     width: 100
                  }, {
                     title: '联系方式',
                     elCls: 'center',
                     dataIndex: 'b',
                     width: 100
                  }, {
                     title: '地址',
                     elCls: 'center',
                     dataIndex: 'c',
                     width: 200
                  }, {
                     title: '地址类型',
                     elCls: 'center',
                     dataIndex: 'd',
                     width: 100
                  },
                  {
                     title: '操作',
                     dataIndex: 'h',
                     elCls: 'center',
                     width: 200,
                     renderer: function (value, obj) {
                        var editStr =
                           '<span class="grid-command btn-edit">[ 编辑 ]</span>';
                        var delStr =
                           '<span class="grid-command btn-del">[ 删除 ]</span>';
                        return editStr + delStr; //页面操作不需要使用Search.createLink
                     }
                  }
               ],
               data = [{
                  a: '厉钦',
                  b: '18916163695',
                  c: '上海市上海市浦东新区龙东大道3869号2号楼3楼',
                  d: '退货地址',
               }];

            var store = new Store({ //初始化数据
                  data: data,
                  pageSize: 2 // 配置分页数目
               }),
               editing = new BUI.Grid.Plugins.DialogEditing({
                  contentId: 'address', //设置隐藏的Dialog内容
                  autoSave: true, //添加数据或者修改数据时，自动保存
                  triggerCls: 'btn-edit',
                  form: {
                     srcNode: '#A_form'
                  },
               }),
               grid = new Grid.Grid({
                  render: '#grid',
                  elCls: 'jx-table-thin',
                  columns: columns,
                  forceFit: true,
                  plugins: [editing],
                  bbar: {
                     // pagingBar:表明包含分页栏
                     pagingBar: true
                  },
                  store: store
               });


            grid.render();

            // 点击添加对图片操作
            $("#add-new-btn").click(function () {
               addFunction();
            });

            //添加记录
            function addFunction() {
               var newData = {
                  b: '',
                
               };
               editing.add(newData, 'a'); //添加记录后，直接编辑
                  $("input[name='type']:eq(0)").prop("checked","true")
            }

         });
      </script>

</body>

</html>